<template>
  <div class="picker">
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        :title="title"
        show-toolbar
        :columns="columns"
        value-key="label"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false
    };
  },
  props: ['title', 'columns', 'show'],
  mounted() {
    this.showPicker = this.show;
  },
  watch: {
    show(newVal) {
      this.showPicker = newVal;
    },
    showPicker(newval) {
      this.$emit('hide', {
        showPicker: newval
      });
    }
  },
  methods: {
    onConfirm(v) {
      this.showPicker = false;
      this.$emit('fetchData', {
        value: v,
        showPicker: this.showPicker
      });
    },
    onCancel() {
      this.showPicker = false;
      this.$emit('cancel', {
        showPicker: this.showPicker
      });
    }
  }
};
</script>

<style lang="less" scoped>
.picker {
  /deep/.van-picker__toolbar {
    height: 80px;
    line-height: 80px;
    padding: 10px 20px;
    .van-picker__cancel,
    .van-picker__title,
    .van-picker__confirm {
      font-size: 34px;
    }
    .van-picker__title {
      line-height: 80px;
    }
  }
  /deep/.van-picker-column__item {
    .van-ellipsis {
      font-size: 34px;
    }
  }
}
</style>
